<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments :: head">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>竹简</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <!-- <link rel="stylesheet" href="./static/css/semantic.min.css"> -->
    <!-- <link rel="stylesheet" href="./static/css/icon.min.css"> -->
    <!-- <link rel="stylesheet" href="./static/css/semantic.css"> -->
    <!-- <link rel="stylesheet" href="./static/css/details.css"> -->
    <!-- <link rel="stylesheet" href="./static/lib/prism/prism.css"> -->
    <link rel="stylesheet" href="../static/css/me-index.css">
    <link rel="stylesheet" href="../static/css/iconfont.css">
    <link rel="stylesheet" href="../static/lib/editormd/css/editormd.min.css">
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/semantic.min.js"></script>
    <script src="../static/lib/editormd/editormd.js"></script>
    <script src="../static/js/index.js"></script>

</head>

<body>
<nav class="ui attached segment grid m-padded-tb-mini">
    <div class="ui container sixteen wide column" style="padding: 0;">
        <div class="ui secondary menu grid m-secondary-color" style="width: 100%;">
            <h2 class="ui header item" style="color: #2185d0;">竹简</h2>
            <div class="item hidden-xs-phone">
                <a href="index.html">首页</a>
            </div>
            <div class="item hidden-xs-phone">
                <a href="">商城</a>
            </div>
            <div class="item hidden-xs-phone">
                <a href="blog.html">博客</a>
            </div>
            <div class="item hidden-xs-phone">
                <a href="">学院</a>
            </div>
            <div class="item hidden-xs-phone">
                <a href="">直播</a>
            </div>
            <div class="item hidden-xs-phone">
                <a href="">论坛</a>
            </div>
            <div class="item hidden-xs-phone">
                <a href="">问答</a>
            </div>
            <div class="item hidden-xs-phone">
                <a href="">活动</a>
            </div>
            <div class="right menu item">
                <div class="ui search">
                    <div class="ui icon input hidden-xs-phone" style="width: 100%;">
                        <input class="prompt" type="text" placeholder="搜索...">
                        <i class="search link icon"></i>
                    </div>
                    <div class="results"></div>
                </div>
            </div>
            <div class="right item container hidden-xs" th:if="${session.account==null}"><a style="color: white"
                                                                                            href="/register">
                <div class="ui primary button">
                    <font style="vertical-align: inherit; width: 100%;">
                        <font style="vertical-align: inherit;">注册</font>
                    </font>
                </div>
            </a>
            </div>
            <div class="item m-secondary-color" th:if="${session.account==null}"><a href="/login">
                <div class="ui button hidden-xs-phone" style="width: 100%;">
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">登录</font>
                    </font>
                </div>
            </a>
            </div>
            <a class="ui icon button right aligned item m-top-right hidden-md" id="button"
               style="margin-left: 0 !important;"><i class="sidebar icon"></i></a>
            <div class="ui dropdown  item" th:if="${session.account!=null}">
                <div class="text">
                    <img class="ui avatar image" src="https://unsplash.it/100/100?image=1005">
                </div>
                <i class="dropdown icon hidden-xs-phone"></i>
                <div class="menu hidden-xs-phone">
                    <a href="#" class="item">我的订单</a>
                    <a href="#" class="item">我的博客</a>
                    <a href="#" class="item">我的关注</a>
                    <a href="#" class="item">我的收藏</a>
                    <a href="#" class="item">个人中心</a>
                    <a href="#" class="item">账号设置</a>
                    <a href="#" class="item">博客管理</a>
                    <a href="#" class="item">帮助</a>
                    <a href="/exit" class="item">退出</a>
                </div>
            </div>
        </div>
    </div>
</nav>
<div class="ui attached column grid center aligned icon hidden-md hidden-xs-phone hidden-yingcang m-item" id="panel"
     style="background-color: white;width: 100%;">
    <div class="four wide column">
        <a href="index.html"><i class="iconfont icon-shangcheng"></i>首页</a>
    </div>
    <div class="four wide column">
        <i class="iconfont icon-shangcheng"></i>
        <a href="">商城</a>
    </div>
    <div class="four wide column">
        <a href="blog.html"><i class="iconfont icon-bokeyuan"></i>博客</a>
    </div>
    <div class="four wide column">
        <a href=""><i class="graduation cap icon"></i>学院</a>
    </div>
    <div class="four wide column">
        <a href=""><i class="iconfont icon-zhibokecheng"></i>直播</a>
    </div>
    <div class="four wide column">
        <i class="iconfont icon-jurassic_bbs"></i>
        <a href="">论坛</a>
    </div>
    <div class="four wide column">
        <a href=""><i class="iconfont icon-wenda"></i>问答</a>
    </div>
    <div class="four wide column">

        <a href=""> <i class="iconfont icon-huodong"></i>活动</a>
    </div>
</div>
<br>
<!--中间内容-->
<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <form id="blog-form" action="#" th:object="${editorVo}" th:action="@{/blogs}" method="post" class="ui form">
            <input type="hidden" name="published">
            <input type="hidden" name="id">
            <div class="required field">
                <div class="ui left labeled input">
                    <div class="ui selection compact teal basic dropdown label">
                        <!--  <input type="hidden" value="原创" name="flag" th:value="*{flag}" >-->
                        <i class="dropdown icon"></i>
                        <div class="text">原创</div>
                        <div class="menu">
                            <div class="item" data-value="原创">原创</div>
                            <div class="item" data-value="转载">转载</div>
                            <div class="item" data-value="翻译">翻译</div>
                        </div>
                    </div>
                    <input class="ui left aligned container" type="text" name="articleTitle" style="max-width: 50em"
                           placeholder="标题">
                    <div style="margin-left:1em!important;">
                        <button type="button" class="ui button" onclick="window.history.go(-1)">
                            <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                &nbsp;&nbsp;&nbsp; &nbsp;返回&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </font></font></button>
                        <button type="button" id="save-btn" class="ui instagram button">
                            <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                保存草稿
                            </font></font></button>
                        <button type="button" id="publish-btn" class="ui youtube button">
                            <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                &nbsp;&nbsp;&nbsp; &nbsp;发布&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </font></font></button>
                    </div>
                </div>

            </div>

            <div class="required field">
                <div id="md-content" style="z-index: 1 !important;">
                        <textarea placeholder="博客内容" name="articleContent" style="display: none"></textarea>
                    <textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
                </div>
            </div>
            <div class="two fields">
                <div class="required field">
                    <div class="ui left labeled action input">
                        <label class="ui compact teal basic label">分类</label>
                        <div class="ui fluid selection dropdown">
                            <input type="hidden" name="categoryId">
                            <i class="dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu">
                                <div class="item" th:each="type : ${categoryList}" data-value="1"  th:data-value="${type.id}" th:text="${type. name}">错误日志</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class=" field">
                    <div class="ui left labeled action input">
                        <label class="ui compact teal basic label">标签</label>
                        <div class="ui fluid selection multiple search  dropdown">
                            <input type="hidden" name="labelId">
                            <i class="dropdown icon"></i>
                            <div class="default text">标签</div>
                            <div class="menu">
                                <div class="item" th:each="label : ${labelList}" data-value="1" th:data-value="${label.id}" th:text="${label.name}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="inline fields">
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="recommend" name="recommend" class="hidden">
                        <label for="recommend">推荐</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="shareStatement" name="reprinted" class="hidden">
                        <label for="shareStatement">转载声明</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="appreciation" name="appreciation" class="hidden">
                        <label for="appreciation">赞赏</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="commentabled" name="commentabled" class="hidden">
                        <label for="commentabled">评论</label>
                    </div>
                </div>
            </div>

            <div class="ui error message"></div>
        </form>
    </div>
</div>
<br>
<br>
<footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted stackable icon divided grid">
            <div class="three wide column hidden-xs-phone"></div>
            <div class="three wide column hidden-xs-phone">
                <h4 class="ui inverted header m-text-thin m-text-spaced m-opacity-mini"><i class="weibo icon"></i>最新微博
                </h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">关于刻意练习清单</a>
                    <a href="#" class="item">tp5框架练习（一）</a>
                </div>
            </div>
            <div class="three wide column">
                <h5 class="ui inverted header m-text-thin m-text-spaced m-opacity-mini"><i class="tty icon"></i>联系我们
                </h5>
                <div class="ui inverted link list">
                    <a href="#" class="item"><i class="envelope outline icon"></i>Email:2629770174@qq.com</a>
                    <a href="#" class="item"><i class="qq icon"></i>QQ:2629770174</a>
                </div>
            </div>
            <div class="seven wide column hidden-xs-phone">
                <h4 class="ui inverted header">CodeMall</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">Mailing address ：广东省广州市江高镇</p>
            </div>
        </div>
        <div class="ui inverted section divider hidden-xs-phone"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini hidden-xs-phone">百度提供站内搜索 京ICP备56757604658号 ©2018-2019
            广州硌哒网络技术有限公司</p>
    </div>
</footer>
</body>
<script src="../static/lib/editormd/lib/marked.min.js" th:src="@{/lib/editormd/lib/marked.min.js}"></script>
<script src="../static/lib/editormd/lib/prettify.min.js" th:src="@{/lib/editormd/lib/prettify.min.js}"></script>
<script src="../static/lib/editormd/lib/raphael.min.js" th:src="@{/lib/editormd/lib/raphael.min.js}"></script>
<script src="../static/lib/editormd/lib/underscore.min.js" th:src="@{/lib/editormd/lib/underscore.min.js}"></script>
<script src="../static/lib/editormd/lib/sequence-diagram.min.js" th:src="@{/lib/editormd/lib/sequence-diagram.min.js}"></script>
<script src="../static/lib/editormd/lib/flowchart.min.js" th:src="@{/lib/editormd/lib/flowchart.min.js}"></script>
<script src="../static/lib/editormd/lib/jquery.flowchart.min.js" th:src="@{/lib/editormd/lib/jquery.flowchart.min.js}"></script>
<script>
    //初始化Markdown编辑器

    var contentEditor;
    $(function () {
        contentEditor = editormd("md-content", {
            width: "100%",
            height: 640,
            syncScrolling: "single",
            path: "/lib/editormd/lib/",
            saveHTMLToTextarea: true,//注意3：这个配置，方便post提交表单


            /**上传图片相关配置如下*/
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/editormdPic",//注意你后端的上传图片服务地址

            emoji: true,//emoji表情，默认关闭
            taskList: true,
            tocm: true, // Using [TOCM]
            tex: true,// 开启科学公式TeX语言支持，默认关闭

        });
    });

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
    $('#save-btn').click(function () {
        $('[name="published"]').val(false);
        $('#blog-form').submit();
    });


    $('#publish-btn').click(function () {
        $('[name="published"]').val(true);
        $('#blog-form').submit();
    });


    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'title',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客标题'
                }]
            },
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客内容'
                }]
            },
            typeId: {
                identifier: 'type.id',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客分类'
                }]
            },
            firstPicture: {
                identifier: 'firstPicture',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客首图'
                }]
            },
            description: {
                identifier: 'description',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客描述'
                }]
            }
        }
    });
</script>

</html>